<template>
    <div class="algorithm-view-container">
        <div class="algorithm-view-bg">
            <CodeRain></CodeRain>
        </div>
        <div class="algorithm-view-search">
            <input class="algorithm-item-keyword" type="text" placeholder="输入关键字查询" v-model="keyword">
        </div>
        <div class="algorithm-view-content">
            <div class="algorithm-item" v-for="(item, i) in filterItem"
                :style="{ '--j': Math.floor(i / 6) + 1, '--i': i % 6 + 1 }" @click=openAlgorithm(item.path)><span>{{
                    item.title }}</span>
            </div>
        </div>
    </div>
</template>

<script>
import CodeRain from '@/components/specialeffects/CodeRain.vue';

//https://www.cs.usfca.edu/~galles/visualization/Algorithms.html
//剽窃下人家的js库:)
export default {
    name: "AlgorithmView",
    components: { CodeRain },
    data() {
        return {
            keyword: "",
            itemList: [
                {
                    title: "银行家算法",
                    path: "/algorithm/Bank",
                },
                {
                    title: "栈的数组实现",
                    path: "/algorithm/StackArray",
                },
                {
                    title: "栈的链表实现",
                    path: "/algorithm/StackLL",
                },
                {
                    title: "队列的数组实现",
                    path: "/algorithm/QueueArray",
                },
                {
                    title: "队列的链表实现",
                    path: "/algorithm/QueueLL",
                },
                {
                    title: "基于有序列表的二分查找和线性查找",
                    path: "/algorithm/Search",
                },
                {
                    title: "二叉查找树",
                    path: "/algorithm/BST",
                },
                {
                    title: "AVL(平衡二叉树)",
                    path: "/algorithm/AVL",
                },
                {
                    title: "红黑树",
                    path: "/algorithm/RedBlack",
                },
                {
                    title: "伸展树",
                    path: "/algorithm/SplayTree",
                },
                {
                    title: "哈希桶",
                    path: "/algorithm/ClosedHashBucket",
                },
                {
                    title: "哈希（开地址法）",
                    path: "/algorithm/ClosedHash",
                },
                {
                    title: "哈希（拉链法）",
                    path: "/algorithm/OpenHash",
                },
                {
                    title: "阶乘",
                    path: "/algorithm/RecFact",
                },
                {
                    title: "字符串反转",
                    path: "/algorithm/RecReverse",
                },
                {
                    title: "N皇后问题",
                    path: "/algorithm/RecQueens",
                },
                {
                    title: "字典树",
                    path: "/algorithm/Trie",
                },
                {
                    title: "基数树",
                    path: "/algorithm/RadixTree",
                },
                {
                    title: "三元搜索树",
                    path: "/algorithm/Ternary",
                },
                {
                    title: "B树",
                    path: "/algorithm/BTree",
                },
                {
                    title: "B+树",
                    path: "/algorithm/BPlusTree",
                },
                {
                    title: "桶排序",
                    path: "/algorithm/BucketSort",
                },
                {
                    title: "基数排序",
                    path: "/algorithm/RadixSort",
                },
                {
                    title: "计数排序",
                    path: "/algorithm/CountingSort",
                },
                {
                    title: "堆排序",
                    path: "/algorithm/HeapSort",
                },
                {
                    title: "比较排序",
                    path: "/algorithm/ComparisonSort",
                },
                {
                    title: "斐波那契堆",
                    path: "/algorithm/FibonacciHeap",
                },
                {
                    title: "斜堆",
                    path: "/algorithm/SkewHeap",
                },
                {
                    title: "左偏堆",
                    path: "/algorithm/LeftistHeap",
                },
                {
                    title: "小顶堆",
                    path: "/algorithm/Heap",
                },
                {
                    title: "二项队列",
                    path: "/algorithm/BinomialQueue",
                },
                {
                    title: "最短路径（Dijkstra）",
                    path: "/algorithm/Dijkstra",
                },
                {
                    title: "MST（最小生成树）",
                    path: "/algorithm/Prim",
                },
                {
                    title: "连通分量",
                    path: "/algorithm/ConnectedComponent",
                },
                {
                    title: "广度优先搜索",
                    path: "/algorithm/BFS",
                },
                {
                    title: "深度优先搜索",
                    path: "/algorithm/DFS",
                },
                {
                    title: "拓扑排序（Indegree）",
                    path: "/algorithm/TopoSortIndegree",
                },
                {
                    title: "拓扑排序（DFS）",
                    path: "/algorithm/TopoSortDFS",
                },
                {
                    title: "全源最短路径（Floyd）",
                    path: "/algorithm/Floyd",
                },
                {
                    title: "最小生成树（Kruskal）",
                    path: "/algorithm/Kruskal",
                },
                {
                    title: "2D坐标变换",
                    path: "/algorithm/ChangeCoordinate2D",
                },
                {
                    title: "2D旋转缩放",
                    path: "/algorithm/RotateScale2D",
                },
                {
                    title: "2D旋转",
                    path: "/algorithm/RotateTranslate2D",
                },
                {
                    title: "3D坐标变换",
                    path: "/algorithm/ChangeCoordinate3D",
                },
                {
                    title: "3D旋转缩放",
                    path: "/algorithm/RotateScale3D",
                },
            ],
        }
    },
    computed: {
        filterItem: function () {
            let list = [];
            if (!this.keyword || this.keyword === '') {
                list = this.itemList;
                return list;
            }
            for (const item of this.itemList) {
                if (item.title.indexOf(this.keyword) > -1) {
                    list.push(item);
                }
            }
            return list;
        },
    },
    methods: {
        openAlgorithm(path) {
            window.open(path, "_blank");
        },
    },
    mounted() {

    },
    beforeUnmount() {
    },
}
</script>

<style scoped>
.algorithm-view-container {
    width: 100vw;
    height: 100vh;
    display: flex;
    background-color: #222;
    background-image: linear-gradient(to right, #333 1px, transparent 1px), linear-gradient(to bottom, #333 1px, transparent 1px);
    background-size: 40px 40px;
}

.algorithm-view-bg {
    width: 100%;
    height: 100%;
    position: fixed;
}

.algorithm-view-search {
    width: 100%;
    height: 70px;
    position: absolute;
    display: flex;
    justify-content: center;
}

.algorithm-view-content {
    width: 100%;
    height: calc(100% - 70px);
    top: 10%;
    position: absolute;
    display: grid;
    grid-auto-rows: 100px;
    gap: 40px;
    overflow-y: auto;
}

.algorithm-item {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
    background: #7c7b7b;
    grid-row: var(--j);
    grid-column: calc(var(--i))/span 1;
    cursor: pointer;
}

.algorithm-item:hover {
    background: #11b4d9;
    transform: scale(1.05);
    transition: 0.5s;
}

.algorithm-item>span {
    text-align: center;
    font-size: 20px;
    font-weight: bolder;
    color: #2c2c2c;
    user-select: none;
}

.algorithm-item:hover>span {
    transition: 1s;
}

.algorithm-item-keyword {
    position: relative;
    top: 10px;
    right: 50px;
    width: 300px;
    height: 50px;
    border-radius: 8px;
    font-size: 20px;
}
</style>